<template>
  <h1 id="h1">111</h1>
  <input type="text" v-model="str1" />
  <input type="text" v-model="str2" />
  <button @click="stop">stop</button>
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
// watchEffect 第一个参数为一个回调函数，第二个参数为一配置对象
// 在回调函数内可以操作响应式数据，当其内部的响应式数据变化时，会重新执行一次回调
// 回调函数参数可以为一个函数，该函数的参数为一回调
// 即在监听器开始执行回调时，会触发参数函数，并执行参数函数内部的回调(第一次初始执行回调时不触发)
// 配置对象可选 flush 属性，控制回调执行的时机，'post' 为在组件更新后执行， 'pre' 更新前， 'sync' 同步执行
// watchEffect 返回值为一函数，再次调用该返回值函数，可以停止监听器
// 默认情况下，初始会执行一次回调函数
// const stopFun: function = watchEffect(
// (beforeFun: function) => {
//   回调内的相关响应式数据更新时，会重新执行一次回调函数
//   fun(...val: Proxy || Ref)
//   回调参数为 beforeFun 函数，会在再次触发回调函数时，首先执行 beforeFun
//   beforeFun 参数函数的参数也为一回调函数
//   beforeFun(()=>{
//     fun()
//   })
// 配置对象选择 flush 为回调执行的时机(包含第一次执行)
// },{ flush: 'post' || 'pre' || 'sync'})
// 执行 watchEffect 反回值函数，会停止监听器
// stopFun()

const str1 = ref<string>('1')
const str2 = ref<string>('2')
// 返回值为一函数，调用该函数会停止监听器
const stop = watchEffect(
  (beforeFun) => {
    // 参数为回调函数，回调函数中的响应式数据修改时，会触发该回调，默认会触发一次
    console.log(str1)
    const h1: HTMLElement = document.querySelector('#h1') as HTMLElement
    console.log(h1)
    // watchEffect 参数为 beforeFun 函数，该函数参数为回调函数
    // 会在触发监听器的第一时间触发该 beforeFun 函数，执行其内部的回调
    beforeFun(() => {
      console.log('before')
    })
    // 配置对象可以配置 watchEffect 触发时机
  },
  { flush: 'post' }
)
</script>
<style scoped></style>
